<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>电影电视剧购物平台</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- 页面容器 -->
<div class="wrapin">
  <!-- 头部区域 -->
  <header class="clearfix"> 
    <!-- Logo -->
    <a href="#" class="logo"><img src="图片\video.png" alt="Logo"/></a>
    <!-- 导航菜单 -->
    <ul class="clearfix nav">
      <li><a href="首页.html">首页</a></li>
      <li><a href="#movie-section">电影</a></li>
      <li><a href="#tv-section">电视剧</a></li>
      <li><a href="#cinema-section">电影院</a></li>
    </ul>
    <!-- 登录/注册区域 -->
    <div class="denglu"> 
      <a href="登录.html" class="dl">登录</a>丨 
      <a href="注册.html" class="dl">注册</a>丨
      <!-- 购物车图标 -->
      <div class="cart-icon">
        <span>🛒</span>
        <span class="cart-count">0</span>
      </div>
    </div>
  </header>
</div>

<!-- 主要内容区域 -->
<div class="wrapin">
  <!-- 轮播图区域 -->
  <div class="banner_con clearfix">
    <div class="banner_box">
     <div class="box-1">
  <ul>
    <li>
      <a href="我家茂.html" class="box">
          <img src="图片\csgo.jpg" style="width: 100%; height: auto;">
      </a>
    </li>
    <li>
      <a href="我家茂.html" class="box">
        <img src="图片\茂.jpg" style="width: 100%; height: auto;">
      </a>
    </li>
    <li>
      <a href="我家茂.html" class="box">
        <img src="图片\封面.png" style="width: 100%; height: auto;">
      </a>
    </li>
  </ul>
</div>
      <!-- 轮播图指示点 -->
<div class="box-2">
  <ul>
    <li class="on"></li>
    <li></li>
    <li></li>
  </ul>
</div>
      <!-- 轮播图导航按钮 -->
      <div class="box-3"> 
        <span class="prev"> &lt; </span> 
        <span class="next"> &gt; </span> 
      </div>
    </div>
  </div>
  
  <!-- 电影院区域 -->
  <div class="con" id="cinema-section">
    <div class="title">
      <h2>电影院</h2>
    </div>
   
    <!-- 万达电影院介绍 -->
    <div class="about clearfix">
      <div class="text">
        <p>万达电影股份有限公司（以下简称万达电影 股票代码：002739.SZ）隶属于万达集团。2005年，万达电影院线成立，2015年A股上市，2017年正式更名为万达电影。业务范围从产业链下游放映业务向上延伸至电影投资、制作和发行及相关衍生业务，全面覆盖电影产业链。截至2020年12月31日，万达电影在全球拥有影院1704家，银幕17118块；包含国内直营影城700家、6099块银幕。其中，拥有44家杜比影院和370块IMAX银幕，IMAX银幕数量全球领先。</p>
        <a href="万达电影.html" class="btn">详情查看</a> 
        <a href="订票.html" class="btn2">订票</a>
      </div>
      <div class="pic"><img src="图片\万达电影.png" alt="万达电影"/></div>
    </div>

    <!-- 太平洋影城介绍 -->
    <div class="about clearfix">
      <div class="text">
        <p>太平洋电影城是四川省电影公司全资影城、属太平洋电影院线旗下影院，创立于1992年12月，距今已23年历史，累计票房收入2.3亿元，接待观众超过2千余万。影城成立以来先后投资三千余万元，经数次装修改造，使影城始终引领电影时尚潮流。地处最繁华的春熙路商圈核心位置，拥有18个豪华电影厅，观众座席数2000多座，是全国影厅最多、节目最多、场次最多、人次最多的影城。</p>
        <a href="太平洋影城.html" class="btn">详情查看</a> 
        <a href="订票1.html" class="btn2">订票</a>
      </div>
      <div class="pic"><img src="图片\太平洋影城.png" alt="太平洋影城"/></div>
    </div>
    
    <!-- 百老汇影城介绍 -->
    <div class="about clearfix">
      <div class="text">
        <p>百老汇电影中心有4间影院，共640个座位，还有1间叫Kubrick的书店，售卖电影、书籍及提供咖啡店服务。该处是除了已结业的影艺戏院外，香港少数播放非主流电影的戏院。2009年11月，百老汇电影院(香港安乐影片有限公司)在北京开设了一家艺术影院——MOMA百老汇电影中心，这是北京第一座大型艺术影院。</p>
        <a href="百老汇影城.html" class="btn">详情查看</a>  
        <a href="订票2.html" class="btn2">订票</a>    
      </div>
      <div class="pic"><img src="图片\百老汇影城.png" alt="百老汇影城"/></div>
    </div>
  </div>
  
  <!-- 热门电影区域 -->
  <div class="con" id="movie-section">
    <div class="title">
      <h2>热门电影</h2>
      <a href="订票.html">查看更多</a> 
    </div>
    <ul class="game_list clearfix">
      <li> 
        <a href="订票.html" class="box">
          <div class="pic"><img src="图片\和平大电影.png" alt="和平精英大电影"/></div>
          <p>和平精英大电影</p>
        </a>
        <button class="add-to-cart" data-id="1" data-name="和平精英大电影" data-price="35">加入购物车</button>
      </li>
      <li> 
        <a href="订票.html" class="box">
          <div class="pic"><img src="图片\无畏契约.png" alt="无畏契约大电影"/></div>
          <p>无畏契约大电影</p>
        </a>
        <button class="add-to-cart" data-id="2" data-name="无畏契约大电影" data-price="40">加入购物车</button>
      </li>
      <li> 
        <a href="王者荣耀大电影.html" class="box">
          <div class="pic"><img src="图片\王者.png" alt="王者荣耀大电影"/></div>
          <p>王者荣耀大电影</p>
        </a>
        <button class="add-to-cart" data-id="3" data-name="王者荣耀大电影" data-price="45">加入购物车</button>
      </li>
      <li> 
        <a href="订票.html" class="box">
          <div class="pic"><img src="图片\反恐.png" alt="反恐精英大电影"/></div>
          <p>反恐精英大电影</p>
        </a>
        <button class="add-to-cart" data-id="4" data-name="反恐精英大电影" data-price="38">加入购物车</button>
      </li>
      <li> 
        <a href="一曲倾情.html" class="box">
          <div class="pic"><img src="图片\一曲.png" alt="一曲倾情"/></div>
          <p>一曲倾情</p>
        </a>
        <button class="add-to-cart" data-id="5" data-name="一曲倾情" data-price="42">加入购物车</button>
      </li>
    </ul>
  </div>
  
  <!-- 热门电视剧区域 -->
  <div class="con" id="tv-section">
    <div class="title">
      <h2>热门电视剧</h2>
      <a href="订票.html">查看更多</a> 
    </div>
    <ul class="game_list clearfix">
      <li> 
        <a href="订票.html" class="box">
          <div class="pic"><img src="图片\1.jpg" alt="111"/></div>
          <p>111</p>
        </a>
        <button class="add-to-cart" data-id="6" data-name="111" data-price="120">加入购物车</button>
      </li>
      <li> 
        <a href="订票.html" class="box">
          <div class="pic"><img src="图片\2.jpg" alt="222"/></div>
          <p>222</p>
        </a>
        <button class="add-to-cart" data-id="7" data-name="222" data-price="110">加入购物车</button>
      </li>
      <li> 
        <a href="订票.html" class="box">
          <div class="pic"><img src="图片\3.jpg" alt="333"/></div>
          <p>333</p>
        </a>
        <button class="add-to-cart" data-id="8" data-name="333" data-price="95">加入购物车</button>
      </li>
      <li> 
        <a href="订票.html" class="box">
          <div class="pic"><img src="图片\4.jpg" alt="444"/></div>
          <p>444</p>
        </a>
        <button class="add-to-cart" data-id="9" data-name="444" data-price="105">加入购物车</button>
      </li>
      <li> 
        <a href="订票.html" class="box">
          <div class="pic"><img src="图片\man.jpg" alt="555"/></div>
          <p>555</p>
        </a>
        <button class="add-to-cart" data-id="10" data-name="555" data-price="100">加入购物车</button>
      </li>
    </ul>
  </div>
  
  <!-- 页脚 -->
  <footer>电影购物平台 © 23215220126 版权所有</footer>
</div>

<!-- 购物车弹窗 -->
<div class="overlay"></div>
<div class="cart-modal">
  <div class="cart-header">
    <h3>我的购物车</h3>
    <button class="close-cart">×</button>
  </div>
  <div class="cart-items">
    <!-- 购物车商品将在这里动态生成 -->
    <div class="empty-cart">
      <p>🛒 购物车是空的</p>
      <p>快去添加喜欢的电影吧！</p>
    </div>
  </div>
  <div class="cart-total">
    <span>总计：</span>
    <span class="total-price">¥0.00</span>
  </div>
  <button class="checkout-btn">去结算</button>
</div>

<script src="script.js"></script>
</body>
</html>